<template>
  <div class="nn">
    <div class="nav">
      <router-link to="/"><span>推荐</span></router-link>
      <p v-for="(v, i) in navdata" :key="i" @click="navdatafun(v.id)">
        {{ v.title }}
      </p>
    </div>
    <span class="iconfont icon-xiajiantou"></span>
  </div>
</template>

<script>
export default {
  created() {
    this.$store.dispatch("getnavdata", { url: "/goodlift/data" });
    // console.log("我是cccc接受来的值", this.$store.state.homem.newnavdata);
  },
  methods: {
    navdatafun(id) {
      this.$router.push({ name: "fruit", query: { navid: id } });
      console.log("我是当前的id", id);
    },
  },
  computed: {
    navdata() {
      return this.$store.state.homem.newnavdata;
    },
  },
};
</script>

<style scoped>
@import url(../../assets/life/iconfont.css);
.nn {
  display: flex;
  width: 100%;
  background-color: #fff;
}
.nn span {
  height: 0.375rem;
}
.nn .iconfont {
  font-size: 0.21rem;
  line-height: 0.375rem;
}
.nav {
  width: 92%;
  height: 0.375rem;
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.nav p {
  padding: 0 15px;
  flex-shrink: 0;
  color: #797d82;
  font-size: 0.136rem;
}
.nav p:hover {
 color: rgb(168, 38, 38);
 font-size: 0.18rem;
 font-weight: 600;
 transition: all .3s;
}
.nav span:hover {
 color: rgb(168, 38, 38);
 font-size: 0.18rem;
 font-weight: 600;
  transition: all .3s;
}
.nav a {
  padding: 0 15px;
  flex-shrink: 0;
  color: #797d82;
  font-size: 0.136rem;
}
</style>